<template>
    <section>
        <el-tabs v-model="activeName" type="card" >
            <el-tab-pane label="轮播图设置" name="first">
                <banner></banner>
            </el-tab-pane>
            <el-tab-pane label="楼层设置" name="second">
               <configure></configure>
            </el-tab-pane>
            <el-tab-pane label="推荐设置" name="third">
                <recommend></recommend>
            </el-tab-pane>
         </el-tabs>
    </section>
</template>

<script>

  import Banner from "@/components/banner.vue"
  import Configure from "@/components/configure.vue"
  import Recommend from "@/components/recommend.vue"

  export default {
        components:{
            Banner:Banner,
            Configure:Configure,
            Recommend:Recommend,
        },
        data() {
            return {
              activeName: 'first'
            };
        },
  }
</script>

<style  lang="scss" scoped>
    .el-tabs{
        margin-top: 20px;
    }
    .nav-letf{
      width: 100px;
      display: inline-block;
      margin-right: 10px;
      margin-top: 10px;
    }
    .nav-right{
      width: calc(100% - 120px);
      display: inline-block;
      vertical-align: top;
    }
  .footer{
    margin-top: 100px;
  }
    .nav-letf .el-button{
      width: 100% ;
      padding: 0;
      height: 40px;
      margin-bottom: 10px;
    }
  .demo-input-suffix{
    margin-bottom: 20px;
  }
  .left-box{
    display: inline-block;
    margin-top: 20px;
  }
  .right-box{
    display: inline-block;
    vertical-align: top;
    margin-top: 20px;
    margin-left: 50px;
  }
  .mlists{
    display: inline-block;
    margin-right: 20px;
  }

</style>
